import React, { PureComponent, Fragment } from 'react'
import { View, StyleSheet, Text } from 'react-native'
import PropTypes from 'prop-types'
import Orientation from 'react-native-orientation-locker'
import { ScaleT, ScaleS, HEIGHT, WIDTH, IS_IPHONEX, IS_IOS } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import { ONE_PIXEL } from '@/utils/ScreenUtil'
import { shareToSession, shareToTimeline } from 'src/utils/PayUtil'
import DefaultImage from '../image/DefaultImage'
import { getUserAvatorLocalCByGender } from 'src/utils/ConfigUtil'
import CustomBoxShadow from 'src/components/boxshadow/CustomBoxShadow'
import BlurImg from 'src/components/blur-img'
import ViewShot, { captureScreen, captureRef } from 'react-native-view-shot'
import { DismissLoading, ShowLoading } from 'src/utils/ToastUtil'

const ReactNative = require('react-native')

export default class SharePage extends PureComponent {
  static propTypes = {
    shareTopSrc: PropTypes.string,
    userAvator: PropTypes.string,
    userName: PropTypes.string,
    title: PropTypes.string,
    time: PropTypes.string,
    gender: PropTypes.string,
    userId: PropTypes.number,
    swipers: PropTypes.array,
    onShare: PropTypes.func,
    onClose: PropTypes.func
  }

  static defaultProps = {
    swipers: []
  }

  constructor (props) {
    super(props)
    this.state = {
    }
  }

  isLock = true

  componentDidMount () {
    ShowLoading()
    this.isLock = Orientation.isLocked()
    Orientation.lockToPortrait()
  }

  _onCancel = () => {
    this.props.onClose()
    if (this.isLock) {
      Orientation.lockToPortrait()
    } else {
      Orientation.unlockAllOrientations()
    }
  }

  _onShare = () => {
    // if (IS_IOS) {
    //   ReactNative.takeSnapshot(this._cardRef, {
    //     format: 'png',
    //     quality: 1
    //   }).then(uri => {
    //     DismissLoading()
    //     console.info(uri, 'uriuriuriuri')
    //     shareToSession({ savePath: uri })
    //   })
    // } else {
    captureRef(this._cardRef, {
      format: 'png',
      quality: 1
    })
      .then(
        uri => {
          DismissLoading()
          console.info(uri, 'uriuriuriuri')
          shareToSession({ savePath: uri })
        }
      )
    // }
  }

  _onSharePeople = () => {
    ShowLoading()
    // if (IS_IOS) {
    //   ReactNative.takeSnapshot(this._cardRef, {
    //     format: 'png',
    //     quality: 1
    //   }).then(uri => {
    //     DismissLoading()
    //     shareToTimeline({ savePath: uri })
    //   })
    // } else {
    captureRef(this._cardRef, {
      format: 'png',
      quality: 1
    })
      .then(
        uri => {
          DismissLoading()
          shareToTimeline({ savePath: uri })
        }
      )
    // }
  }

  _setCardRef = ref => {
    this._cardRef = ref
  }

  _blurImgLoad = () => {
    DismissLoading()
  }

  render () {
    const {
      shareTopSrc,
      userAvator,
      userName,
      title,
      time,
      gender,
      userId
    } = this.props
    console.info(shareTopSrc, 'shareTopSrcshareTopSrcshareTopSrc')
    return (
      <View style={styles.bigContainer}>
        <ViewShot ref={this._setCardRef} style={styles.container}>
          <View style={styles.containerBg}>
            {/* <CustomImage
              style={styles.containerBgImg}
              source={{ uri: shareTopSrc }}
            />
            <BlurImg
              blurAmount={30}
              style={styles.containerBgImg}
              source={{ uri: shareTopSrc }}
            ></BlurImg> */}
            <CustomImage
              style={styles.containerBgImg}
              source={require('src/imgC/share/shareBg.jpg')}
            />
            {/* <View
              style={{
                backgroundColor: '#fff',
                width: WIDTH,
                height: HEIGHT,
                opacity: 0.5
              }}
            ></View> */}
          </View>
          <CustomBoxShadow style={styles.card}>
            <View style={styles.shareTop}>
              <CustomImage
                style={styles.shareTopImg}
                source={{ uri: shareTopSrc || 'https://imagesize.hrwork.com/sp/files/bd028170-0704-4f3d-a235-727a28f8281b.jpg' }}
                onLoadEnd={this._blurImgLoad}
              />
            </View>
            <View style={styles.cardBottom}>
              <Text style={styles.title}>{title}</Text>
              <View style={styles.time}>
                <Text style={styles.timeText}>时间：</Text>
                <Text style={styles.timeText}>{time}</Text>
              </View>
              <View style={styles.userImgContainer}>
                <DefaultImage
                  style={styles.userImg}
                  source={{ uri: userAvator }}
                  errorSource={getUserAvatorLocalCByGender(gender, userId)}
                />
              </View>
              <View style={styles.userContent}>
                <Text style={styles.userNameText}>{userName}</Text>
                <Text style={styles.userText}>同学和你分享</Text>
              </View>
            </View>
            <View style={styles.QRCodeContainer}>
              <CustomImage
                style={styles.QRCodeImg}
                source={require('src/imgC/share/QRCode.png')}
              />
              <View style={styles.QRCodeContent}>
                <Text style={styles.QRCodeTitle}>使用人职初APP</Text>
                <Text style={styles.QRCodeSubText}>
                  快来pick你心中的职位吧～
                </Text>
              </View>
            </View>
          </CustomBoxShadow>
          {/* <CustomImage
            style={[styles.bgImg, styles.bgImgLeft]}
            source={require('src/imgC/share/girl.png')}
          />
          <CustomImage
            style={[styles.bgImg, styles.bgImgRight]}
            source={require('src/imgC/share/boy.png')}
          /> */}
          <CustomImage
            style={styles.logoImg}
            source={require('src/imgC/share/logo.png')}
          />
        </ViewShot>
        <CustomBoxShadow style={styles.bottomContainer}>
          <View style={styles.bottomContent}>
            <CustomButton style={styles.iconItem} onPress={this._onShare}>
              <CustomImage
                style={styles.icon}
                source={require('src/imgC/share/wechat.png')}
              />
              <Text style={styles.iconText}>微信</Text>
            </CustomButton>
            <CustomButton style={styles.iconItem} onPress={this._onSharePeople}>
              <CustomImage
                style={styles.icon}
                source={require('src/imgC/share/circle.png')}
              />
              <Text style={styles.iconText}>朋友圈</Text>
            </CustomButton>
          </View>
          <CustomButton style={styles.bottomBtn} onPress={this._onCancel}>
            <Text style={styles.btnText}>取消</Text>
          </CustomButton>
        </CustomBoxShadow>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  bigContainer: {
    width: WIDTH,
    height: HEIGHT
  },
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: WIDTH,
    height: HEIGHT,
    justifyContent: 'center',
    alignItems: 'center',
    paddingBottom: ScaleS(80)
  },
  containerBg: {
    width: WIDTH,
    height: HEIGHT,
    position: 'absolute',
    left: 0,
    top: 0,
    backgroundColor: '#fff'
  },
  containerBgImg: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: WIDTH,
    height: HEIGHT,
    resizeMode: 'cover'
    // opacity: 0.5
  },
  card: {
    width: ScaleS(266),
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: ScaleS(20),
    zIndex: 99,
    shadowRadius: ScaleS(20),
    shadowOpacity: 0.3,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 0
    }
  },
  bgImg: {
    width: ScaleS(40),
    height: ScaleS(109),
    position: 'absolute',
    top: ScaleS(300),
    zIndex: 1
  },
  bgImgLeft: {
    left: ScaleS(15)
  },
  bgImgRight: {
    right: ScaleS(15)
  },
  shareTop: {
    width: ScaleS(266),
    height: ScaleS(150),
    borderTopLeftRadius: ScaleS(20),
    borderTopRightRadius: ScaleS(20),
    overflow: 'hidden'
  },
  shareTopImg: {
    width: ScaleS(266),
    height: ScaleS(150),
    resizeMode: 'cover'
  },
  cardBottom: {
    width: '100%',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#FFE400',
    paddingHorizontal: ScaleS(18),
    paddingTop: ScaleS(16),
    paddingBottom: ScaleS(22)
  },
  title: {
    fontSize: ScaleT(18),
    fontWeight: '600',
    color: '#3C3C3C',
    textAlign: 'center',
    lineHeight: ScaleS(25)
  },
  time: {
    width: '100%',
    height: ScaleS(21),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: ScaleS(12)
  },
  timeText: {
    fontSize: ScaleT(11),
    fontWeight: '600',
    color: '#3C3C3C',
    marginRight: ScaleS(5)
  },
  userImgContainer: {
    width: ScaleS(32),
    height: ScaleS(32),
    borderWidth: ScaleS(1),
    borderColor: '#fff',
    borderStyle: 'solid',
    borderRadius: ScaleS(15),
    marginTop: ScaleS(15)
  },
  userImg: {
    width: ScaleS(30),
    height: ScaleS(30),
    borderRadius: ScaleS(15),
    resizeMode: 'cover'
  },
  userContent: {
    marginTop: ScaleS(10),
    flexDirection: 'row'
  },
  userNameText: {
    fontWeight: '600',
    fontSize: ScaleT(11),
    color: '#3C3C3C'
  },
  userText: {
    fontWeight: '400',
    fontSize: ScaleT(11),
    color: '#3C3C3C'
  },
  QRCodeContainer: {
    width: '100%',
    backgroundColor: '#fff',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: ScaleS(20),
    paddingVertical: ScaleS(20),
    borderBottomLeftRadius: ScaleS(20),
    borderBottomRightRadius: ScaleS(20)
  },
  QRCodeImg: {
    width: ScaleS(60),
    height: ScaleS(60),
    marginRight: ScaleS(19),
    resizeMode: 'cover'
  },
  QRCodeContent: {},
  QRCodeTitle: {
    fontSize: ScaleT(14),
    fontWeight: '500',
    color: '#3C3C3C'
  },
  QRCodeSubText: {
    fontSize: ScaleT(11),
    fontWeight: '400',
    color: '#3C3C3C',
    marginTop: ScaleS(7)
  },
  bottomContainer: {
    position: 'absolute',
    left: 0,
    top: IS_IPHONEX ? HEIGHT - ScaleS(160) : HEIGHT - ScaleS(140),
    width: WIDTH,
    height: IS_IPHONEX ? ScaleS(160) : ScaleS(140),
    borderTopLeftRadius: ScaleS(5),
    borderTopRightRadius: ScaleS(5),
    backgroundColor: '#fff',
    shadowRadius: ScaleS(20),
    shadowOpacity: 0.1,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 0
    }
  },
  bottomContent: {
    width: WIDTH,
    paddingHorizontal: ScaleS(38),
    paddingVertical: ScaleS(20),
    flexDirection: 'row',
    justifyContent: 'flex-start',
    backgroundColor: 'rgba(242, 242, 242, 1)'
  },
  iconItem: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: ScaleS(40)
  },
  icon: {
    width: ScaleS(20),
    height: ScaleS(20),
    marginBottom: ScaleS(10),
    resizeMode: 'cover'
  },
  iconText: {
    fontSize: ScaleT(11),
    color: '#666666'
  },
  bottomBtn: {
    width: ScaleS(345),
    height: IS_IPHONEX ? ScaleS(75) : ScaleS(55),
    marginHorizontal: ScaleS(15),
    borderTopColor: 'rgba(151, 151, 151, 0.2)',
    borderTopWidth: ONE_PIXEL,
    borderStyle: 'solid',
    justifyContent: 'center',
    alignItems: 'center',
    paddingBottom: IS_IPHONEX ? ScaleS(20) : ScaleS(0)
  },
  btnText: {
    fontSize: ScaleT(16),
    color: '#3C3C3C'
  },
  logoImg: {
    width: ScaleS(130),
    height: ScaleS(45),
    position: 'absolute',
    bottom: ScaleS(53)
  }
})
